import React, { memo, useCallback } from 'react';
import { Radio, InputNumber } from 'antd';
import { Header } from 'gantd';
import { UiConfigProps } from '@/components/searchform/interface';

interface UiContentProps {
  uiConfig: UiConfigProps;
  onChange: (key: string, val: string | boolean | number) => void;
}

function UiContent(props: UiContentProps) {
  const { uiConfig = {}, onChange } = props;
  const { searchType = 'click', searchAfterReset = true, autoSearchWait = 1 } = uiConfig;
  const handleChange = useCallback((key, val) => {
    onChange && onChange(key, typeof val === 'object' ? val.target.value : val);
  }, []);

  const onAutoSearchWaitChange = useCallback((val) => {
    if (typeof val !== 'number') {
      return;
    }
    onChange && onChange('autoSearchWait', val);
  }, []);

  return (
    <>
      <Header type="num" num="1" title={tr('查询方式')} />
      <Radio.Group
        options={[
          { label: tr('自动查询(有延迟)'), value: 'auto' },
          { label: tr('自动查询(无延迟)'), value: 'autoNoDelay' },
          { label: tr('点击查询'), value: 'click' },
        ]}
        value={searchType}
        onChange={handleChange.bind(null, 'searchType')}
      />
      {searchType === 'auto' && (
        <div style={{ margin: '5px 0 0 0' }}>
          <span>
            {tr('设置延迟时间')}
            {`(${tr('秒')})`}：
          </span>
          <InputNumber
            size="small"
            style={{ width: '80px', display: 'inline-block !important' }}
            value={autoSearchWait}
            min={1}
            max={10}
            onChange={onAutoSearchWaitChange}
          />
        </div>
      )}
      <Header type="num" num="2" title={tr('重置查询')} />
      <Radio.Group
        options={[
          { label: tr('是'), value: true },
          { label: tr('否'), value: false },
        ]}
        value={searchAfterReset}
        onChange={handleChange.bind(null, 'searchAfterReset')}
      />
    </>
  );
}
export default memo(UiContent);
